<!--
checkbox
v1.0.0
-->

<template>
  <div class="sh-checkbox"
       :class="{
          'sh-checked':value==name,
          'left':!icon_position || icon_position=='left',
          'right':icon_position == 'right'}"
       @tap.stop="check()">
    <slot></slot>
  </div>
</template>
<style>

  .sh-checkbox {
    background: #fff;
    display: inline-block;
    line-height: 0.9rem;
  }

  .sh-checkbox + .sh-checkbox {
    margin-left: 1.5rem;
  }

  .sh-checkbox.left:before {
    content: "";
    display: inline-block;
    background-image: url("");
    width: 0.9rem;
    height: 0.9rem;
    background-size: 100%;
    vertical-align: top;
  }

  .sh-checked.left:before {
    background-image: url("");
  }

  .sh-checkbox.right:after {
    content: "";
    display: inline-block;
    background-image: url("");
    width: 0.9rem;
    height: 0.9rem;
    background-size: 100%;
    vertical-align: top;
  }

  .sh-checked.right:after {
    background-image: url("");
  }
</style>
<script>
  export default {
    name: 'sh-checkbox',
    props: {
      value: [String, Number],
      name: String,
      icon_position:String,//图标位置，left，right
    },
    data() {
      return {}
    },
    beforeMount() {

    },
    mounted() {
    },
    methods: {
      init() {

      },
      check() {
        this.$emit("input", this.name);
      }
    },
    watch: {},
  };
</script>
